<template>
	<view>
		<van-tabs wipeable sticky animated swipeable color="#49CD82" :active="active" @change="onChange">
			<van-tab v-for="(item, index) in orderList" :key="index" :title="item.tabName">
				<scroll-view class="scroll-cont" scroll-y @scrolltolower="onGetMore">
					<view class="list padding-bottom">
						<block v-for="(son, sonindex) in item.list" :key="sonindex">
							<order-item :item="son"></order-item>
						</block>
						<!--正在加载 start-->
						<v-loadmore :visible="load"></v-loadmore>
						<!--正在加载 end-->
						<!--没有更多了 start-->
						<v-nomore :visible="!load && isMore" bgcolor="#fafafa"></v-nomore>
					</view>
				</scroll-view>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	import OrderItem from "@/components/OrderItem.vue"
	import vNomore from "@/components/load/nomore.vue"
	import vLoadmore from "@/components/load/loadmore.vue"
	import { alert } from "@/utils/util.js"
	import orderApi from "@/Api/Order.js"
	
	export default {
		components: {
			OrderItem,
			vNomore,
			vLoadmore
		},
		data() {
			return {
				active: 0,
				current_page: 0,
				load: true,
				onMore: false,
				isMore: false,
				orderList: [
					{
						tabName: '全部',
						list: []
					},{
						tabName: '待使用',
						list: []
					},{
						tabName: '已完成',
						list: []
					},{
						tabName: '售后',
						list: []
					}
				]
			};
		},
		onShow() {
			this.current_page = 0
			this.isMore = false
			this.getOrderList()
		},
		methods: {
			onChange({ detail: { index } }) {
				this.active = index;
				this.current_page = 0
				this.isMore = false
				this.getOrderList()
			},
			// 上拉加载更多
			onGetMore() {
				if(!this.isMore) {
					this.getOrderList()
				}
			},
			// 获取订单列表
			getOrderList() {
				this.load = true
				let { active, current_page, orderList } = this
				orderApi.getOrderList(active, current_page)
					.then(res=> {
						if(current_page == 0) orderList[active].list = []
						let onMore = false
						let len = res.data.length
						len > 0 ? res.data.forEach(item =>  orderList[active].list.push(item)) :  onMore = true
						this.orderList = orderList
						this.load = false
						this.current_page = res.current_page
						this.isMore = len < res.per_page ? true: false
						this.onMore = onMore
					})
					.catch(err => {
						this.load = false
						alert(err).then(() => setTimeout(() => uni.navigateBack(), 300))
					})
			}
		}
	}
</script>

<style lang="scss">
	.van-tabs__line {
		height: 4rpx !important;
	}
	.van-tab--active {
		color: #49CD82 !important;
	}

</style>
